<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.small {
				margin: 0 10px;
				border: 1px solid #fff;
			}
			.small:hover {
				border-color: #000;
			}
			#box{width: 430px;height: 430px;position: relative;border:1px solid #f2f2f2;}
			#mirror{width:430px;height:430px;overflow: hidden;position: absolute;left: 450px;top: 8px;border:1px solid #f2f2f2;}
			#onimg{width: 860px;height: 860px;position: absolute;left: 0;top: 0;}
			#filter{height: 215px;width: 215px;opacity: 0.4;background: #000;position: absolute;left: 0;top: 0;}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="imgs/1-large.jpg" class="middle" >
			<div id ="filter"></div>
		</div>
		<div id ="mirror">
			<img src="imgs/1-large.jpg"  id = "onimg">	
		</div>
		<div>
			<img src="imgs/1-small.jpg" class="small"  data-url="imgs/1-large.jpg">
			<img src="imgs/2-small.jpg" class="small"  data-url="imgs/2-large.jpg">
			<img src="imgs/5-small.jpg" class="small"  data-url="imgs/5-large.jpg">
			<img src="imgs/4-small.jpg" class="small"  data-url="imgs/4-large.jpg">
			<img src="imgs/5-small.jpg" class="small"  data-url="imgs/5-large.jpg">
		</div>
		<script type="text/javascript">
	var aSmall = document.querySelectorAll('.small');
	var omiddle = document.querySelector('.middle');
	var oMiddle = document.getElementById('box');
	var onImg = document.getElementById('onimg');
	var oFilter = document.getElementById('filter');

			for(var i=0;i<aSmall.length;i++){
				aSmall[i].num = i;
				aSmall[i].onmouseover = function(){
					var url	= this.getAttribute("data-url");
					omiddle.src=url;
					onImg.src = url;	
				}
			}

	oMiddle.onmousemove = function(e){
		var e = e||event;
		var x = e.clientX - oMiddle.offsetLeft - oFilter.offsetWidth/2;
		var y = e.clientY - oMiddle.offsetTop - oFilter.offsetHeight/2;
		
				if(x<0){
					x=0;
				}	
				if(x>oMiddle.offsetWidth-oFilter.offsetWidth){
					x = oMiddle.offsetWidth-oFilter.offsetWidth;
				}

				if(y<0){
					y = 0;
				}

				if(y>oMiddle.offsetHeight-oFilter.offsetHeight){
					y = oMiddle.offsetHeight-oFilter.offsetHeight;
				}
				oFilter.style.left = x+'px';
				oFilter.style.top = y+'px';

				onImg.style.left = -x*2+'px';
				onImg.style.top = -y*2+'px';
	}
</script>

	</body>
</html>
